<template>
  <div class="service-container">
    <img class="bgimg" src="../assets/img/banner2.png"/>
    <div class="container">
      <div class="cooper">
        <div class="cooper-item">
          <h1 class="step1">公 司 简 介</h1>
            <hr class="step2" color="#1889B2" width="30" />
            <div id="info-container"></div>
        </div>
          <!--<img style="position: absolute;left: 0;z-index: 0;top: 552px;" width="100%" height="auto" src="../assets/img/companybgbottom.png"/>-->
        <div class="time-tree">
          <img style="margin-left: -20%;" width="140%" src="../assets/img/companybgtop.png"/>
        	<div class="top1-box">
            <img class="top1" src="../assets/img/cf1.png"/>        		
        	</div>
        	<div class="top2-box tb">
        		<img class="left" src="../assets/img/ocmlogo.png"/>
        		<p class="top-text">2015年6月，一厘米科技正式成立，公司宗旨是帮助传统企业轻松“互联网+”，积极筹备智能硬件研发。</p>
        	</div>
        	<div class="top3-box tb">
            <img class="right" src="../assets/img/cfimg3.png"/>
              <img class="cf" src="../assets/img/cf2.png"/>
            <div class="left">
              <h1 class="top-head">智能储物柜 <span>研发成功</span></h1>
              <p class="top-text">2016年6月，一厘米科技自行研发的智能储物柜推向市场</p>	
            </div>
          </div>
          <div class="top4-box tb">
          	<img class="left" src="../assets/img/cfimg4.jpg"/>
          	<img class="cf" src="../assets/img/cf3.png"/>
          	<div class="right">
          		<h1 class="top-head">健身会所智能化设备 <span>研发成功</span></h1>
              <p class="top-text">2016年9月，一厘米科技自行研发的健身会所智能化设备推向市场</p>
          	</div>
          </div>
          <div class="top5-box tb">
            <img class="right" src="../assets/img/cfimg5.png"/>
              <img class="cf" src="../assets/img/cf4.png"/>
            <div class="left">
              <h1 class="top-head"> <span>签约</span>海悦荟 <span>和</span>飞洋<span>健身会所</span></h1>
              <p class="top-text">2016年10月，重庆知名高端健身会所海悦荟，重庆万州最大健身会所飞洋健身正式使用我司设备</p> 
            </div>
          </div>
          <div class="top6-box tb">
            <img class="left" src="../assets/img/zwlogo2.png"/>
            <img class="cf" src="../assets/img/cf3.png"/>
            <div class="right">
              <h1 class="top-head">中未智联<span>正式启用</span></h1>
              <p style="margin: 0;" class="top-text">2017年1月，一厘米科技旗下专注于智能产品研发、销售品牌——中未智联正式启用。将快速打造体验更好、成本更低的健身会所智能化方案。真正帮助健身会所“省钱、省心、更时尚”</p>
            </div>
          </div>
          <img class="tb" width="100%" src="../assets/img/cfbg3.jpg"/>
          <img class="verline" src="../assets/img/ver-line.png"/>
          <div class="time-node node1 origin">2016 <br /> 6月</div>
          <div class="time-node node2 origin">2016 <br /> 9月</div>
          <div class="time-node node3 origin">2016 <br /> 10月</div>
          <div class="time-node node4 origin">2017 <br /> 1月</div>
          <i class="s-circle1 origin turn-rotate"><span class="left-line"></span></i>
          <i class="s-circle2 origin turn-rotate"><span class="right-line"></span></i>
          <i class="s-circle3 origin turn-rotate"><span class="left-line"></span></i>
          <i class="s-circle4 origin turn-rotate"><span class="right-line"></span></i>
          <i class="s-circle5 origin turn-rotate"><span class="left-line"></span></i>
        </div>
        
      </div>
    <bottom></bottom>
    </div>
  </div>
</template>

<script>

import Bottom from './Bottom'
export default {
  name: 'company',
  data () {
    return {
      info:DataManager.CompanyInfo
    }
  },components:{
    Bottom
  },created(){ 
  },mounted(){
    $("#info-container").html(this.info);
    (function(){
      $(".top1-box").css({"height":"120"});
      var timesp=1500;
      var delay1 =0;
      $(".verline").height(960);
      $(".turn-rotate").each(function(){
        var t1 = $(this);
        setTimeout(function(){
          t1.removeClass("origin");   
        },(delay1++)*timesp+300)
      })
      var delay2 =1;
      $(".time-node").each(function(){
        var t2 = $(this);
        setTimeout(function(){
          t2.removeClass("origin");   
        },((delay2++)*timesp))
      })
      var delay3=0;
      $(".tb").each(function(){
        var t3 = $(this);
        setTimeout(function(){
          t3.css("opacity","1"); 
        },((delay3++)*timesp+700))
      })
    })();   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#info-container{width: 80%;margin: auto;text-align: left;}
#info-container p{margin: 0;}
.time-tree{position: relative;text-align: center;min-height: 1400px;}
.time-tree h1{margin-bottom: 0;}
.verline{position: absolute;top: 362px;width:1px;height:0;left: 405px;transition: all linear 8s;}
.top-text{font-size: 11px;width: 220px;text-align: left;}
.top-head{color: white;font-weight: 400;font-size: 18px;text-align: left;}
.top-head span{font-size: 14px;}
.top1-box,.top2-box,.top3-box,.top4-box,.top5-box,.top6-box{width: 100%;position: relative;}
.tb{opacity: 0;transition: all .5s;}
.time-tree .right,.time-tree .left,.time-tree .cf,.time-tree .top-text{position: absolute;}
/*1*/
.top1-box{height: 0;overflow: hidden;transition: all .5s .5s;}
.top1{width: 255px;}
/*2*/
.top2-box{height: 102px;}
.top2-box .left{width: 205px;margin-left: -329px;}
.top2-box .top-text{right: 123px;top: 0;}
/*3*/
.top3-box{background: url('../assets/img/cfbg1.jpg') no-repeat; background-size: cover;height: 157px;}
.top3-box .right{right: 175px;top: 5px;height: 90%;}
.top3-box .left{top: 50px;left: 85px;z-index: 1;}
.top3-box .cf{height: 70%;left: 71px;top: 28px;}
/*4*/
.top4-box{height: 240px;}
.top4-box .left{height: 61%;left: 68px;top: 62px;}
.top4-box .cf{height: 51%;top: 50px;right: 60px;}
.top4-box .right{right: 77px;top: 75px;}
/*5*/
.top5-box{background: url('../assets/img/cfbg2.jpg') no-repeat; background-size: cover;height: 200px;}
.top5-box .right{right: 60px;top: 40px;height: 72%;}
.top5-box .left{top: 50px;left: 85px;z-index: 1;}
.top5-box .cf{height: 73%;left: 71px;top: 28px;}
/*6*/
.top6-box{height: 240px;}
.top6-box .left{height: 50%;left: 68px;top: 62px;}
.top6-box .cf{height: 51%;top: 44px;right: 60px;}
.top6-box .right{right: 182px;top: 62px;}
.time-tree .time-node{width: 42px;height: 42px;border: solid 5px #24A8D8;left: 379px;color: white;font-size: 13px;padding:6px 3px 0;background: #01688E;}
.time-node.node1{top: 527px;}
.time-node.node2{top: 723px;}
.time-node.node3{top: 942px;}
.time-node.node4{top: 1161px;}
.time-node.origin{transform:scale(0,0)}
.s-circle2.origin,.s-circle4.origin{transform:scale(0,0) rotate(90deg);}
.s-circle1.origin,.s-circle3.origin,.s-circle5.origin{transform:scale(0,0) rotate(-90deg);}

.s-circle1,.s-circle2,.s-circle3,.s-circle4,.s-circle5,.time-node{
  background: #1189B5;
  border-radius: 100%;
  display: inline-block;
  top: 0;
  width: 11px;
  height: 11px;
  margin-left: -4px;
  border: solid 3px #24A8D8;
  position: absolute;
  transition: all 1s;
}
.left-line{display: block;position: absolute;width: 45px;margin: 1px 0 0 -48px;border-bottom: solid 1px #36BEF0;}
.left-line::before{content:''; display: block;width: 2px;height: 2px;border:solid 1px #36BEF0; background:#36BEF0;border-radius: 100%;position: relative;top: 2.2px;}
.right-line{display: block;position: absolute;width: 43px;margin: 1px 0 0 13px;border-bottom: solid 1px #36BEF0;}
.right-line::after{content:''; display: block;width: 2px;height: 2px;border:solid 1px #36BEF0; background:#36BEF0;border-radius: 100%;position: relative;top: 2.2px;left:39px;}
.s-circle1{top: 387px;}
.s-circle2{top: 484px;}
.s-circle3{top: 662px;}
.s-circle4{top: 879px;}
.s-circle5{top: 1095px;}
h1{
  margin-top: 0;
  font-weight: 400;
  color: #858585;
  font-size: 16px;
}
.cooper{
  width: 800px;
  margin: auto;
  position: relative;
  top: -40px;
  background: white;
}
.cooper-item:first-child{margin-top: 0;}
.cooper-item{
  padding-top: 40px;
  margin: auto;
}
.service-container{
  width: 100%;
  height: 100%;
}
.container{
  padding-bottom: 60px;
  position: relative;
  background: #F7F5F0;
  min-height: 800px;
}
.bgimg{
  display: block;
  width: 100%;
}
.icon-box{width: 60%;margin:20px auto;}
.icon-box .icon-itme{
  width: 20%;
  margin-right: 20%;
  float: left;
}
.icon-box >.icon-itme:last-of-type{
  margin-right: 0;
}
.split{
  width: 80%;
  margin: 30px auto -30px;
  border-top: solid 1px #CFD1D0;
}
.split img{position: relative;top:-15px ;width: 20px;border: solid 5px white;}
.ver-box:first-of-type{margin-right: 2%;float: left;}
.ver-box{
  float: right;
  display: inline-block;
  padding-bottom: 72%;
  position: relative;
  width: 48%;
}

</style>
